<template>
  <a-card style="margin-bottom: 15px" size="small">
    <template #title>
      <div style="margin: 10px 0px 20px 0px; font-size: 16px">查看原因</div>
    </template>
    <template #extra>
      <a-tooltip title="返回上级">
        <a-button size="middle" @click="goback">
          <template #icon>
            <RollbackOutlined />
          </template>
        </a-button>
      </a-tooltip>
    </template>
    <div class="content">
      <h2 style="color: #d85050; text-align: center">审核不通过原因</h2>
      <div class="contentAreaText">
        <div class="causeBox">
          <h4>基金科审批意见:</h4>
          <p style="margin: 0; padding: 0; text-align: left">
            {{ blauditopinionj ? blauditopinionj : '暂无' }}
          </p>
        </div>
        <div class="causeBox">
          <h4>财务室审批意见:</h4>
          <p style="margin: 0; padding: 0; text-align: left">
            {{ blauditopinionc ? blauditopinionc : '暂无' }}
          </p>
        </div>
        <div class="causeBox">
          <h4>副主任审批意见:</h4>
          <p style="margin: 0; padding: 0; text-align: left">
            {{ blauditopinionf ? blauditopinionf : '暂无' }}
          </p>
        </div>
        <div class="causeBox">
          <h4>主任审批意见:</h4>
          <p style="margin: 0; padding: 0; text-align: left">
            {{ blauditopinionz ? blauditopinionz : '暂无' }}
          </p>
        </div>
        <div class="causeBox">
          <h4>秘书长审批意见:</h4>
          <p style="margin: 0; padding: 0; text-align: left">
            {{ blauditopinionm ? blauditopinionm : '暂无' }}
          </p>
        </div>
      </div>
    </div>
  </a-card>
</template>

<script setup>
  import { nextTick, reactive, ref, defineProps, onMounted, toRefs, toRaw } from 'vue';
  import { message, Modal } from 'ant-design-vue';
  import { smartSentry } from '/@/lib/smart-sentry';
  import { ProManageApi } from '/@/api/ProManage/ProManage-api';
  import { SmartLoading } from '/@/components/framework/smart-loading';
  const emits = defineEmits(['emitPass']);
  const goback = () => {
    let obj = {
      type: 0,
    };
    emits('emitPass', obj);
  };
  //获取信息
  const props = defineProps({
    passData: Object,
  });
  // 关闭
  function onClose() {
    goback();
  }
  //  基金科审批意见
  const blauditopinionj = ref('');
  // 财务室审批意见
  const blauditopinionc = ref('');
  // 副主任审批意见
  const blauditopinionf = ref('');
  //主任审批意见
  const blauditopinionz = ref('');
  //秘书长审批意见
  const blauditopinionm = ref('');
  blauditopinionj.value = props.passData.blauditopinionj;
  blauditopinionc.value = props.passData.blauditopinionc;
  blauditopinionf.value = props.passData.blauditopinionf;
  blauditopinionz.value = props.passData.blauditopinionz;
  blauditopinionm.value = props.passData.blauditopinionm;
</script>

<style lang="less" scoped>
  .causeBox {
    width: 80%;
    text-align: left;
    border-block-end: 1px solid rgba(5, 5, 5, 0.06);
    margin: 20px auto;
    h4 {
      color: rgba(0, 0, 0, 0.88);
      font-size: 15px;
      line-height: 1.5714285714285714;
      font-weight: bold;
    }
    p {
      color: rgba(0, 0, 0, 0.45);
      font-size: 14px;
    }
  }
  .steps-content {
    width: 100%;
    border: 1px dashed #e9e9e9;
    border-radius: 6px;
    min-height: 510px;
    padding-top: 40px;
    margin: 20px auto;
  }

  .steps-action {
    margin-top: 24px;
    float: right;
  }

  .content {
    background: #f7f7f7;
    border: 1px solid #dedede;
    margin: 40px 4.3% 0px 4.3%;
    padding: 15px 19px;
    padding-bottom: 50px;
    min-height: 450px;
  }

  .contentArea {
    text-align: center;
    margin-top: 30px;
  }

  .contentAreaText {
    text-align: center;
    width: 100%;
    /* 设置宽度为100%，可以根据需要调整 */
    overflow-wrap: break-word;
    /* 允许单词在超出边界时换行 */
    word-wrap: break-word;

    /* 兼容旧版浏览器 */
    h2 {
      margin: 20px 0 1.5em 0;
      color: red;
    }
  }
</style>
